import React, { ReactNode, useEffect, useState } from 'react';
import CesiumView from '../components/CesiumView';
import { Button, Drawer, Modal, Tabs } from 'antd';
import { useModel } from 'umi';

import {
  CloseOutlined,
  BorderInnerOutlined,
  SplitCellsOutlined,
  EnvironmentOutlined,
  MergeCellsOutlined,
  TagsOutlined,
  HddOutlined,
} from '@ant-design/icons';

import '../global.less';
import styles from './index.less';

import {
  applyPolyfills,
  defineCustomElements,
} from '@esri/calcite-components/dist/loader';

import '@esri/calcite-components/dist/calcite/calcite.css';
import Measure from '@/components/Measure';
import CustomModal from '@/components/CustomModal';
import BaseMap from '@/components/BaseMap';
import MapLocation from '@/components/Location';
import Layer from '@/components/Layer';
import { drawPolygon } from '../utils/analyize';
import {
  CalciteAction,
  CalciteActionBar,
  CalciteActionGroup,
  CalciteAvatar,
  CalciteShell,
  CalciteShellPanel,
} from '@esri/calcite-components-react';

applyPolyfills().then(() => {
  defineCustomElements(window);
});
const { TabPane } = Tabs;

export default function IndexPage() {
  return (
    <>
      <CalciteShell>
        <CalciteShellPanel slot="primary-panel" position="start" detached>
          <CalciteActionBar slot="action-bar">
            <CalciteActionGroup>
              <CalciteAction text="Add" icon="plus"></CalciteAction>
              <CalciteAction text="Add" icon="plus"></CalciteAction>
            </CalciteActionGroup>
          </CalciteActionBar>
        </CalciteShellPanel>
      </CalciteShell>
      {/* <calcite-shell>
        <calcite-shell-panel slot="primary-panel" position="start" detached>
          <calcite-action-bar slot="action-bar">
            <calcite-action-group>
              <calcite-action text="Add" icon="plus"></calcite-action>
              <calcite-action text="Save" disabled icon="save"></calcite-action>
              <calcite-action
                text="Layers"
                active
                indicator
                icon="layers"
              ></calcite-action>
            </calcite-action-group>
            <calcite-action-group>
              <calcite-action text="Add" icon="plus"></calcite-action>
              <calcite-action
                text="Layers"
                indicator
                icon="layers"
              ></calcite-action>
            </calcite-action-group>
          </calcite-action-bar>
          <calcite-block
            collapsible
            heading="Primary Content"
            summary="This is the primary content."
          >
            <calcite-block-content>
              <calcite-action
                text="Puppies"
                text-enabled
                indicator
                icon="plus"
              ></calcite-action>
              <calcite-action
                text="Kittens"
                text-enabled
                icon="save"
              ></calcite-action>
              <calcite-action
                text="Birds?"
                text-enabled
                icon="banana"
              ></calcite-action>
            </calcite-block-content>
          </calcite-block>
          <calcite-block
            collapsible
            heading="Additional Block"
            summary="The is another block content."
          >
            <calcite-block-content>
              <p>Cool thing.</p>
            </calcite-block-content>
          </calcite-block>
        </calcite-shell-panel>
        <calcite-shell-panel
          slot="contextual-panel"
          position="end"
          detached
          height-scale="l"
        >
          <calcite-action-bar slot="action-bar">
            <calcite-action-group>
              <calcite-action text="Add" active icon="plus"></calcite-action>
              <calcite-action text="Save" disabled icon="save"></calcite-action>
              <calcite-action text="Layers" icon="layers"></calcite-action>
            </calcite-action-group>
            <calcite-action-group>
              <calcite-action text="Add" icon="plus"></calcite-action>
              <calcite-action text="Save" disabled icon="save"></calcite-action>
              <calcite-action text="Layers" icon="layers"></calcite-action>
            </calcite-action-group>
            <calcite-action
              slot="bottom-actions"
              text="Tips"
              icon="lightbulb"
            ></calcite-action>
          </calcite-action-bar>
          <calcite-flow>
            <calcite-panel heading="Layer settings">
              <calcite-block
                collapsible
                open
                heading="Contextual Content"
                summary="Select goodness"
              >
                <calcite-value-list multiple filter-enabled>
                  <calcite-value-list-item
                    label="2018 Population Density (Esri)"
                    description="{POPDENS_CY}"
                    value="POPDENS_CY"
                  >
                    <calcite-action
                      slot="actions-end"
                      icon="camera-flash-on"
                    ></calcite-action>
                  </calcite-value-list-item>
                  <calcite-value-list-item
                    label="2018 Population Density [Updated]"
                    description="{POPDENS_CY}"
                    value="POPDENS_CY2"
                  >
                    <calcite-action
                      slot="actions-end"
                      icon="banana"
                    ></calcite-action>
                  </calcite-value-list-item>
                  <calcite-value-list-item
                    label="2018 Total Households (Esri)"
                    description="{TOTHH_CY}"
                    value="TOTHH_CY"
                  >
                    <calcite-action
                      slot="actions-end"
                      icon="person2"
                    ></calcite-action>
                  </calcite-value-list-item>
                </calcite-value-list>
              </calcite-block>
            </calcite-panel>
          </calcite-flow>
        </calcite-shell-panel>
        <calcite-tip-manager slot="center-row">
          <calcite-tip
            heading="The Red Rocks and Blue Water"
            thumbnail="https://placeimg.com/1000/600"
            text-thumbnail="This is an image of nature."
          ></calcite-tip>
          <calcite-tip
            heading="The Long Trees"
            thumbnail="https://placeimg.com/1000/600"
            text-thumbnail="This is an image of trees."
          ></calcite-tip>
        </calcite-tip-manager>
      </calcite-shell> */}
    </>
  );
}
